body{font-size: 16px;}
.con{display: flex;width: 100%;height: 100%;}
#left{width: 240px;height: 100%;text-align: center;padding-top: 40px;background: #fff;box-sizing: border-box;}
#left img{display: block;margin: 0 auto;}
#left .qr-code{margin-top: 40px;}
#left .qr-code p{margin-top: 10px;font-size: 0.875em;}
#left nav{margin-top: 50px;}
#left nav a{display: block;height: 32px;line-height: 32px;font-size: 0.875em;width: 120px;margin: 0 auto;border-radius: 5px;}
#left nav a:hover{background: skyblue;color: #fff;}

#right{flex: 1;background: #eff2f4;box-sizing: border-box;position: relative;height: auto;overflow: hidden;}
#right header{height: 80px;line-height: 80px;position: absolute;top: 0;left: 0;padding: 0 10px 0 20px; }
#right header a{padding: 6px 12px;border:1px solid #ccc;font-size: 0.75em;}
#right header a.active{background: #666;color: #fff;}
#right header a.first{border-right-width: 0;border-top-left-radius: 5px;border-bottom-left-radius: 5px;}
#right header a.last{border-top-right-radius: 5px;border-bottom-right-radius: 5px;}
#right header span.closeleft{display: block;width: 24px;height: 24px;float: left;margin: 28px 20px;cursor: pointer;background: url(../images/left.png) no-repeat;-webkit-background-size: cover;background-size: cover;}
#right header span.click{background-image: url(../images/menu.png);}
#right .main{position: absolute;top: 80px;left: 0;padding: 0 10px 0 0;text-align: left;overflow: auto;box-sizing: border-box;height: auto;}
#right .main>ul li{width: 300px;height: 278px;margin: 0 15px 30px 15px; float: left;background: #fff;position: relative;overflow: hidden;}
#right .main>ul p{font-size: 0.75em;color: #999;margin: 8px 0 0 20px;}
#right .main .title{font-size: 1em;color:#000;}
#right .main>ul img.blockimg{display: block;width: 100%;}
#right .main .cover{position: absolute;left: 0;width: 100%;display: none;}
#right .main>ul li:hover .cover{display: block;}
#right .main .covert{top: 0;background: rgba(0,0,0,0.4);height: 178px;text-align: center;animation: covert .4s ease-out;}
#right .main .covert img{margin-top: 64px;}
#right .main .coverb{height: 100px;bottom: 0;background: skyblue;animation: coverb .4s ease-out;}
#right .main .coverb p{color:#fff;}
#right .pagination-holder{margin-bottom: 30px;margin-left: 20px;}
@keyframes covert {
    from{
        top: -178px;
    }
    to{
        top: 0;
    }
}
@keyframes coverb {
    from{
        bottom: -100px;
    }
    to{
        bottom: 0;
    }
}
#article{position: absolute;top: 80px;left: 0;overflow: auto;box-sizing: border-box;height: auto;width: 100%;}
#article>div{width: 1000px;margin: 0 auto;text-align: center;overflow: auto;}
#article h1{font-size: 1.875em;margin-bottom: 40px;}
#article p{text-indent: 2em;line-height: 2em;text-align: left;}
#article img{margin: 30px 0;}
